<template>
  <card>
    <template v-slot:title>运营活动效果</template>
    <template v-slot:header_num>78%</template>

    <template v-slot:chart>
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div ref="echart" id="chart" style="width: 100%; height: 100%"></div>
    </template>

    <template v-slot:footer_text>周同比</template>
    <template v-slot:footer_num>65%<i class="el-icon-top"></i></template>

    <template v-slot:footer_text2>日同比</template>
    <template v-slot:footer_num2>11%<i class="el-icon-top"></i></template>
  </card>
</template>

<script>
import Card from "./CardLayout";
import * as echarts from "echarts";

export default {
  components: {
    Card,
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom = this.$refs.echart;
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: false,
          min: 0,
          max: 100,
        },
        yAxis: {
          show: false,
          type: "category",
          data: ["活动效果"],
        },
        series: [
          {
            data: [78],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            barMaxWidth: 15,
            color: "yellowgreen",
            label: {
              show: true,
              formatter: "|",
              position: "right",
              fontSize: 17,
            },
          },
        ],
        // layout test
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
i {
  color: rgb(10, 194, 10);
  font-weight: bold;
}
</style>


